<template>
	<div class="fight-launch">
    <!-- 搜索的背景色是白色 -->
    <div class="bgw">
      <!-- 搜索 -->
      <form class="form-inline">
        <div class="form-group mr36">
          <w-label :must="false">商品名称</w-label>
          <w-input class="input-inline" :validate="false" v-model="goodsName"></w-input>
        </div>
        <div class="form-group">
          <w-label :must="false">商品货号</w-label>
          <w-input class="input-inline" :validate="false" v-model="goodsSerial"></w-input>
        </div>
        <w-button type="main" @on-click="searchByParam">搜索</w-button>
      </form>

    </div>
    <!-- 内容列表 -->
    <div class="store-goods-list">
      <w-table :columns="columns1">
        <!-- 发起拼单列表 -->
        <tr v-for="(goods, index) in goodsList" v-bind:key="index">
          <!-- 商品基本信息 -->
          <td class="goods">
            <img :src="goods.photoUrlPrefix + goods.goodsMainPhotoPath" @click="goGoodsDetail(goods.id)">
            <p @click="goGoodsDetail(goods.id)">{{goods.goodsName}}</p>
          </td>
          <!-- 商品货号 -->
          <td>{{goods.goodsSerial}}</td>
          <!-- 商品类目 -->
          <td>
            <span v-if="goods.gcName != null" v-text="goods.gcName"></span>
          </td>
          <td>{{goods.publishName}}</td>
          <!-- <td>{{goods.brandName}}</td> -->
          <!-- 操作 -->
          <td class="operate">
            <button type="button" @click="onSetFight(goods.id)">设置拼单</button>
          </td>
        </tr>
        <!-- 如果没有数据，则加载此提示消息 -->
        <tr v-if="goodsList.length == 0">
          <td colspan="7">暂时没有数据哟！</td>
        </tr>
      </w-table>
    </div>

    <!-- 设置拼单模态框 -->
    <w-panel-fixed-wrap title="设置拼单规则" v-model="showModule" @on-confirm="submitUpdatedGoodsSkuInfoHandler" @on-cancel="resetSkuParams">
      <!-- <i class="close-btn">&times;</i> -->
      <div class="fightSet">
        <div class="fightRow">
          <div class="title">拼单结束时间：</div>
          <div class="date">
            <w-datepicker v-model="goodsParams.fightGoodsEndTime" :split="true"></w-datepicker>
          </div>
        </div>
        <div class="fightRow">
          <div class="title">商品类型：</div>
          <div class="radioGroup clearfix">
            <div class="radio fl">
              <w-radio label="0" name="supplyMode" v-model="goodsParams.goodsNumType">期货</w-radio>
            </div>
            <!--  若该商品不是现货商品，则不可设置拼单商品为现货 -->
            <div class="radio">
              <w-radio label="1" name="supplyMode" v-model="goodsParams.goodsNumType" :disabled="goodsType != 1">现货</w-radio>
            </div>
          </div>
        </div>
        <div class="fightRow">拼单参数配置</div>
        <div class="fightRow">
          <div class="SKU">
            <table class="table">
              <thead>
                <th>颜色</th><th>颜色最低发货量</th><th>尺码</th><th>采购商最低起订量</th><th v-if="goodsParams.goodsNumType == '1'">商品数量</th>
              </thead>
              <!-- SKU组合 -->
              <sku-group v-for="(item, index) in goodsParams.goodsRulesDetailList" :index="index" :goods-type="goodsParams.goodsNumType" :key="index" :specs="item" :count="true"></sku-group>
            </table>
          </div>
        </div>
        <div class="fightRow">
          <div class="title">拼单发货总量：</div>
          <div class="date">
            <w-input rule="isEmpty|onlyInt"  error="必填|格式错误" v-model="goodsParams.crowdfundingCount"></w-input>
            件
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 分页 -->
    <w-paging v-show="totalPage > 1" :current="currentPage" :total="totalPage" @page="jumptToPage"></w-paging>
  </div>
</template>

<script>
  import { apiGoods, apiFight } from 'js/api'
  import { FONT_GOODS_DETAIL_URL } from 'js/config'
  import { mapGetters } from 'vuex'
  import skuGroup from './common/SkuGroup.vue'
  // 全局作用域
  import app from '../../main'

  export default {
    data() {
      return {
        // 商品名称
        goodsName: '',

        // 商品货号
        goodsSerial: '',

        // 第一次不展示分页组件
        showPage: false,

        // 当前页码
        currentPage: 1,

        // 总共多少页
        totalPage: 1,

        // 每页展示多少条数据
        showItem: 5,

        // 商品列表
        goodsList: [],
        showModule: false, // 设置拼单模态框
        goodsType: '',
        // 设置拼单规则入参
        goodsParams: {
          accessToken: this.token,
          goodsId: '',
          crowdfundingCount: '',
          fightGoodsEndTime: '',
          goodsNumType: 0,
          goodsRulesDetailList: []
        },
        // 拼单参数
        columns: [
          {title: '颜色'},
          {title: '颜色最低发货量'},
          {title: '尺码'},
          {title: '采购量最低起订量'}
        ],
        // 发起拼单
        columns1: [
          {title: '名称', width: '20%'},
          {title: '商品编号'},
          {title: '分类'},
          {title: '发布人'},
          {title: '操作'}
        ]
      }
    },
    created() {
      this.handlerForFightList()
    },
    components: {
      skuGroup
    },
    computed: {
      ...mapGetters(['token', 'storeId'])
    },
    methods: {
      /**
       * 重置参数
       */
      resetSkuParams() {
        this.goodsParams = {
          accessToken: this.token,
          goodsId: '',
          crowdfundingCount: '',
          fightGoodsEndTime: '',
          goodsNumType: 0,
          goodsRulesDetailList: []
        }
      },
      // 打开新窗口查看商品详情
      goGoodsDetail(goodsId) {
        window.open(`${FONT_GOODS_DETAIL_URL}` + goodsId)
      },
      /**
       * 获取上架状态的商品列表
       * queryGoodsList
       */
      handlerForFightList() {
        apiGoods.queryPdGoodsList({
          storeId: this.storeId,
          goodsStatus: 0,
          goodsName: this.goodsName,
          goodsSerial: this.goodsSerial,
          currentPage: this.currentPage,
          showCount: this.showItem
        }).then((data) => {
          // 如果返回的商品列表没有值
          if (!data.goodsList || data.goodsList.length == 0) {
            // 设置总页数是0，这样页面就不展示分页组件了
            this.totalPage = 0

            // 清空商品列表
            this.goodsList = []
            return
          }

          // 展示分页组件（防止第一次加载失败时出现分页组件）
          this.showPage = true

          // 记录当前的页码
          this.currentPage = Number(data.currentPage || '1')

          // 设置总页码
          this.totalPage = data.pageTotal

          // 赋值
          this.goodsList = data.goodsList
        })
      },
      /**
       * 设置拼单
       */
      onSetFight(goodsId) {
        this.showModule = true
        apiFight.getGoodsGspDetail(goodsId).then(data => {
          this.goodsParams.accessToken = this.token
          this.goodsParams.goodsId = goodsId
          this.goodsParams.goodsRulesDetailList = data.goodsDetailList
          // 获取该商品的类型
          this.goodsType = data.supplyMode
          this.goodsParams.goodsRulesDetailList.forEach(data => {
            data.specpropertyList.forEach(v => {
              this.$set(v, 'specpropertySmallCount', '')
            })
          })
        })
      },
      /**
       * 更新已经修改后的商品sku信息
       * 发起拼单/再次拼单
       */
      submitUpdatedGoodsSkuInfoHandler() {
        if (!this.goodsParams.fightGoodsEndTime) {
          this.$toast('请选择拼单结束时间')
          return
        } else {
          let date = new Date()
          let newDate = new Date(this.goodsParams.fightGoodsEndTime)
          if (date - newDate >= 0) {
            $toast('拼单时间结束时间必须大于当前时间')
            return
          }
        }
        if (this.goodsParams.goodsNumType != 0 && this.goodsParams.goodsNumType != 1) {
          this.$toast('请选择商品类型')
          return
        }
        this.goodsParams.goodsRulesDetailList.forEach(item => {
          if (!item.specpropertyCrowdSum) {
            this.$toast('请输入颜色最低发货量')
            return
          }
          item.specpropertyList.forEach(spcs => {
            if (!spcs.specpropertySmallCount) {
              this.$toast('请输入采购商最低起订量')
              return
            }
          })
        })
        if (!this.goodsParams.crowdfundingCount) {
          this.$toast('请输入发货量')
          return
        }
        apiFight.installCrowdFundRule(this.goodsParams).then(data => {
          this.$toast('设置拼单成功', () => {
            this.showModule = false
            this.resetSkuParams()
            this.handlerForFightList()
            // this.$router.push('../fightAlone/fightList')
          })
        })
      },
      /**
       * 通过参数搜索
       */
      searchByParam() {
        // 设置当前页为第一页
        this.currentPage = 1

        // 不展示分页
        this.showPage = false

        // 加载数据
        this.handlerForFightList()
      },
      /**
       * 跳转到制定页面
       *
       * @parma {Integer} page 当前页
       */
      jumptToPage(page = 1) {
        // 记录当前页
        this.currentPage = page

        // 请求数据
        this.handlerForFightList()
      }
    }
  }
</script>

<style lang="scss">
  .fight-launch {
    .m-panel-wrap {
      width: 536px!important;
      height: 500px!important;
      max-height: 584px!important;
    }
    .panel-title {
      h3 {
        text-align: center;
        float: none;
      }
    }
    .g-panel-fixed .m-panel-wrap {
      top: 50%!important;
      left: 50%!important;
    }
    .btn.default {
      display: none
    }
  }
</style>
<style lang="scss" scoped>
  .fight-launch {
    .close-btn {
      position: absolute;
      top: 0;
      right: 20px;
      font-size: 22px;
    }
    .bgw {
      background-color: white;
      padding: 20px 30px 0px 30px;
      // margin: -20px -30px 0px -30px;
      position: relative;
      z-index: 10;
    }

    .goods {
      cursor: pointer;
      p {
        margin: 0px;
        padding: 15px;
      }
    }

    .checked-width {
      width: 80px;
    }

    .all {
      margin-left:  18px;
    }

    .form-inline {
      padding: 20px 0;
    }

    .mal {
      margin-left: 18px;
      width: 72px;
    }

    .mald {
      margin-left: 38px;
      width: 72px;
    }

    .mr36 {
      margin-right: 36px;
    }

    .pdl30 {
      padding-left: 30px;
    }

    .input-inline {
      display: inline-block;
      margin-left: 14px;
      width: 194px;
    }

    .reason {
      color: #ff7e00;
    }
  }
  // 拼单模态框
  .fightRow {
      margin-bottom: 20px;
    .title {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .date {
      display: inline-block;
      width: 352px;
    }
    .radioGroup {
      width: 250px;
      display: inline-block;
      .radio {
        margin-right: 50px;
      }
    }
  }
</style>